import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
//任何具有PreferredSize的widget都可以出现在AppBar的底部。
//通常，AppBar的底部widget是TabBar，但是可以使用具有PreferredSize的任何widget。在这个应用程序中，应用程序栏的底部widget是一个TabPageSelector，用于显示应用程序的TabBarView中所选页面的相对位置
class AppBarBottomSample extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _AppBarBottomSampleState();
  }
}

class Choice{
  const Choice({required this.title, required this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const<Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

class ChoiceCard extends StatelessWidget{
  const ChoiceCard({Key? key, required this.choice}) : super(key: key);
  final Choice choice;
  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1!;
    return Card(
      color: Colors.white,
      child: Center(
        child:Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(choice.icon, size: 128.0, color: textStyle.color,),
            Text(choice.title, style: textStyle,),
          ],
        ),
      ),
    );
  }
}

class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin{
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: choices.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _nextPage(int delta){
    final int newIndex = _tabController.index + delta;
    if(newIndex < 0 || newIndex >= _tabController.length){
      return ;
    }
    _tabController.animateTo(newIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Bottom Widget'),
        actions: [
          IconButton(
            tooltip: 'Previous choice',
            icon: const Icon(Icons.arrow_back),
            onPressed: (){_nextPage(-1);},
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            tooltip: 'Next choice',
            onPressed: (){_nextPage(1);},
          )
        ],
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(48.0),
          child: Container(
            height: 48.0,
            alignment: Alignment.center,
            child: TabPageSelector(controller: _tabController,),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: choices.map((Choice choice){
          return Padding(padding: const EdgeInsets.all(16.0),
          child: ChoiceCard(choice: choice),);
        }).toList(),
      ),
    );
  }
}
